<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小王的 boost 搜索引擎</title>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #fff; font-family: "Microsoft YaHei", sans-serif; }

    .container { width: 800px; margin: 30px auto; }

    /* 搜索框 */
    .search { display: flex; height: 52px; }
    .search input {
      flex: 1; padding: 0 15px;
      border: 1px solid #999; border-right: 0;
      font-size: 16px; color: #333;
    }
    .search button {
      width: 150px; border: 1px solid #999; border-left: 0;
      background: #4e6ef2; color: #fff; font-size: 19px; cursor: pointer;
    }

    /* 结果区 */
    .result { margin-top: 20px; }
    .item { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
    .item a {
      font-size: 20px; color: #4e6ef2; text-decoration: none; font-weight: bold;
    }
    .item a:hover { text-decoration: underline; }
    .item p { margin-top: 5px; font-size: 16px; color: #555; }
    .item i {
      display: block; margin-top: 4px;
      font-size: 14px; color: #00c; font-style: normal;
    }
    .empty { text-align: center; color: #999; margin-top: 40px; }
  </style>
</head>
<body>
  <div class="container">
    <div class="search">
      <!-- 关键点 1：正确写法 -->
      <input type="text" id="keyword" placeholder="请输入搜索关键字…">
      <button onclick="Search()">搜索一下</button>
    </div>

    <div class="result"></div>
  </div>

  <script>
    // 回车也能搜
    $('#keyword').on('keypress', e => { if (e.which === 13) Search(); });

    function Search() {
      const query = $('#keyword').val().trim();
      if (!query) { alert('请输入关键字'); return; }

      $.ajax({
        type: 'GET',
        url: '/s?word=' + encodeURIComponent(query),   // 关键点 2：补 =
        dataType: 'json',                             // 关键点 3：告诉 jQuery 是 json
        success: data => BuildHtml(data),
        error: xhr => console.error(xhr)
      });
    }

    function BuildHtml(data) {
      const $box = $('.result').empty();
      if (!data || data.length === 0) {
        $box.append('<div class="empty">暂无结果</div>');
        return;
      }
      for (let elem of data) {
        $(`
        <div class="item">
          <a href="${elem.url}" target="_blank" rel="noopener">${elem.title}</a>
          <p>${elem.body}</p>
          <i>${elem.url}</i>
        </div>`).appendTo($box);
      }
    }
  </script>
</body>
</html>